var allData = [];
// 页面加载完成后执行
window.onload = function() {
	// 先从/get/list接口获取数据
	fetch('http://127.0.0.1/sea/coordinateTime/getTimeList', {
			method: 'GET',
		})
		.then(response => response.json())
		.then(result => {
			console.log('List<Long> from /get/list:', result);
			var dataList = result.data;
			// 如果获取到的数据不为空，则开始遍历
			if (dataList && dataList.length > 0) {
				let index = 0;

				// 每隔500ms遍历一次数据
				let intervalId = setInterval(function() {
					if (index < dataList.length) {
						let timeValue = dataList[index];

						// 使用遍历出来的timeValue作为参数，请求/coordinate/getCoordinateByTime接口
						fetch(`http://127.0.0.1/sea/coordinate/getCoordinateByTime?time=${timeValue}`, {
								method: 'GET',
							})
							.then(response => response.json())
							.then(coordinateData => {
								console.log(`Coordinate data for time ${timeValue}:`,
									coordinateData);
								// 你可以在这里处理返回的坐标数据，例如更新页面或图表
								drowPictrue(coordinateData.data);

								//dataHandle();
							})
							.catch(error => {
								console.error(`Error fetching data for time ${timeValue}:`, error);
							});

						// 继续下一个数据
						index++;
					} else {
						// 当遍历完数据后，停止定时器
						clearInterval(intervalId);
					}
				}, 500); // 每500ms执行一次
			} else {
				console.log('No data found in /get/list response.');
			}
		})
		.catch(error => {
			console.error('Error fetching list from /get/list:', error);
		});
}
var drowDatas = [];

function dataHandle() {
	console.log(drowDatas.length);
	//获取前100个
	var spliceData = allData.splice(0, 100);
	drowDatas = drowDatas.concat(spliceData);
	drowPictrue(drowDatas);
	//判断长度
	if (drowDatas.length > 1000) {
		drowDatas.splice(0, 100);
	}
}
//每次绘制1000个点位，新增500个点位后，移除头部的500点位
function drowPictrue(data) {
	var floorData = [];
	$.getScript(
		'https://fastly.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js'
	).done(function() {
		var noise = new SimplexNoise(Math.random);

		function generateData() {
			var data = [];
			for (var i = -30; i <= 20; i++) {
				for (var j = -30; j <= 20; j++) {
					var value = noise.noise2D(i / 20, j / 20);
					data.push([i, j, value * 2 - 10 ]);
				}
			}
			return data;
		}
		floorData = generateData();
		var resultList = data.coordinateParamList;
		var newData = [];
		// 初始化或获取已有的 ECharts 实例
		var chart = echarts.getInstanceByDom(document.getElementById('main')) || echarts.init(document
			.getElementById('main'));
		for (var i = 0; i < resultList.length; i++) {
			newData.push([resultList[i].x, resultList[i].z, resultList[i].y]);
		}

		// 配置项
		var option = {
			title: {
				text: '海底坐标点绘制图'
			},
			visualMap: {
				show: false // 不需要颜色渐变
			},
			tooltip: {},
			xAxis3D: {
				type: 'value',
				min: -30,
				max: 20
			},
			yAxis3D: {
				type: 'value',
				min: -30,
				max: 20
			},
			zAxis3D: {
				type: 'value'
			},
			grid3D: {
				viewControl: {
					projection: 'perspective',
					autoRotate: false, // 关闭自动旋转，允许用户自由旋转
					autoRotateSpeed: 10, // 自动旋转速度（如果需要自动旋转可以打开）
					rotateSensitivity: 1, // 鼠标旋转灵敏度
					zoomSensitivity: 1, // 缩放灵敏度
					panSensitivity: 1, // 平移灵敏度
					// 允许用户使用鼠标进行旋转、缩放和平移
					rotateMouseButton: 'left',
					zoomMouseButton: 'middle',
					panMouseButton: 'right',
					distance: 3000 // 调整视角距离
				},
				boxWidth: 200,
				boxDepth: 200,
				light: {
					main: {
						intensity: 1.2
					},
					ambient: {
						intensity: 0.3
					}
				}
			},
			series: [{
				type: 'scatter3D', // 使用 scatter3D 类型表示独立的点
				symbolSize: 6, // 设置点的大小
				itemStyle: {
					color: '#cec9c3' // 将点设置为黑色
				},
				data: newData // 数据
			}, {
				type: 'surface', // 使用 scatter3D 类型表示独立的点
				shading: 'realistic',
				data: floorData // 数据
			}],
			animation: true, // 启用动画
			animationDurationUpdate: 500,
			animationEasingUpdate: 'linear'
		};

		// 更新图表
		chart.setOption(option, {
			notMerge: false,
			lazyUpdate: false,
			silent: true
		});


		// 使用增量更新，逐步渲染
		chart.setOption(option, {
			notMerge: false, // 不合并会重置整个图表，保持 false 以平滑更新
			lazyUpdate: false, // 延迟更新以提高性能
			silent: true // 禁用事件响应，提高性能
		});
	});

}